<template>
  <el-scrollbar class="standard-item-detail full-height">
    <el-form v-if="postForm" ref="postForm" :model="postForm" :show-message="false" :status-icon="true" label-width="120px" label-position="left" >
      <el-form-item :label="$t('item.title')">
        <el-input v-model="postForm.Title" class="line-input form-item-width" />
      </el-form-item>
      <el-form-item label="TX Type">
        <el-radio-group v-model="postForm.TxType" class="form-item-width">
          <el-radio-button label="TX">TX</el-radio-button>
          <el-radio-button label="RX">RX</el-radio-button>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="Data Form">
        <el-checkbox-group v-model="postForm.DataForm" class="form-item-width">
          <el-checkbox-button v-for="form in dataFormOptions" :key="form" :label="form">
            {{ form }}
          </el-checkbox-button>
        </el-checkbox-group>
      </el-form-item>
      <el-form-item label="Site List">
        <el-checkbox-group v-model="postForm.SiteIdList" class="form-item-width">
          <el-checkbox-button v-for="site in siteOptions" :key="site.Id" :label="site.Id">
            {{ site.Title }}
          </el-checkbox-button>
        </el-checkbox-group>
      </el-form-item>
      <el-form-item label="Env List">
        <el-checkbox-group v-model="postForm.EnvList" class="form-item-width">
          <el-checkbox-button v-for="env in standard.EnvList" :key="env" :label="env">{{ env }}</el-checkbox-button>
        </el-checkbox-group>
      </el-form-item>
      <el-form-item label="Remark">
        <el-input v-model="postForm.Remark" type="textarea" :rows="3" class="form-item-width" />
      </el-form-item>
      <el-form-item label="Applicable">
        <item-prop-detail v-model="postForm.ApplicableList" :standard="standard" />
      </el-form-item>
      <el-form-item label="Test Method">
        <item-prop-detail v-model="postForm.MethodList" :standard="standard" />
      </el-form-item>
      <el-form-item label="Requirement">
        <item-prop-detail v-model="postForm.RequirementList" :standard="standard" />
      </el-form-item>
      <el-form-item label="Block Diagram">
        <item-prop-detail v-model="postForm.BlockDiagramList" :standard="standard" />
      </el-form-item>
      <el-form-item label="Procedure">
        <item-prop-detail v-model="postForm.ProcedureList" :standard="standard" />
      </el-form-item>
      <el-form-item label="Limit">
        <item-prop-detail v-model="postForm.LimitList" :standard="standard" />
      </el-form-item>
      <el-form-item label="Uncertainty">
        <item-prop-detail v-model="postForm.UncertaintyList" :standard="standard" />
      </el-form-item>
    </el-form>

    <div class="margin-top-10">
      <el-button type="primary" size="small" @click="onSubmit">Submit</el-button>
    </div>
  </el-scrollbar>
</template>

<script>
import { createStandardItem, updateStandardItem } from '@/api/standard'
import ItemPropDetail from '@/views/standard/components/ItemPropDetail'

export default {
  name: 'StandardItemDetail',
  components: { ItemPropDetail },
  props: {
    value: {
      type: Object,
      default() {
        return null
      }
    },
    standard: {
      type: Object,
      default() {
        return {}
      }
    },
    isEdit: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      postForm: null,
      dataFormOptions: ['Image', 'Word', 'Excel', 'PDF'],
      siteOptions: [
        {
          Id: '100001',
          Title: 'x1'
        },
        {
          Id: '100002',
          Title: 'x2'
        }
      ]
    }
  },
  watch: {
    standard() {
      this.initPostForm()
    },
    value: {
      handler() {
        this.initPostForm()
      },
      deep: true,
      immediate: true
    },
    postForm() {
      this.$emit('change', this.postForm)
      this.$emit('input', this.postForm)
    }
  },
  created() {
    this.initPostForm()
  },
  methods: {
    initPostForm() {
      this.postForm = this.value
      if (this.postForm) {
        this.$set(this.postForm, 'StandardId', this.standard.Id)
      }
    },
    async onSubmit() {
      const data = this.isEdit ? await updateStandardItem(this.postForm) : await createStandardItem(this.postForm)
      if (data.Message === 'ok') {
        this.$notify({
          title: this.$t('standard.success'),
          message: this.isEdit ? this.$t('standard.editSuccessAlert') : this.$t(
            'standard.addSuccessAlert'),
          type: 'success',
          duration: 2000
        })
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.form-item-width {
  width: 500px;
}
</style>
